<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="referrer" content="origin">
    <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="Cache-Control" content="no-cache, no-store, must-revalidate">
    <script type="text/javascript" charset="UTF-8" src="https://wx.gtimg.com/pay_h5/goldplan/js/jgoldplan-1.0.0.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue@2.7.16/dist/vue.min.js"></script>
    <script src="./js/flexible.js"></script>
    <style>
        .page-box {
            box-sizing: border-box;
            /* background-color: #f2f6ff; */
            background-color: #fff;
            padding: .36rem;
            padding-top: 1.32rem;
        }
        .container {
            display: flex;
            font-size: .3733rem;
            flex-flow: column nowrap;
            justify-content: flex-start;
            align-items: center;
        }
        
        .img-inner {
            width: 100%;
            height: 100%;
            object-fit: fill;
        }
        .list-style {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-top: 10px;
        }
        .title {
            color: #666;
            font-size: 14px;
        }
        .detail {
            color: #333;
            font-size: 14px;
        }
        .line-style {
            height: 1px;
            width: 100%;
            margin: 5px;
            background-color: #d1d1d1;
        }
        .button-style {
            padding:10px;
            width: 200px;
            height: 30px;
            border: 2px solid #189fff;
            border-radius: 5px;
            background-color: #fff;
            color: #189fff;
            text-align: center;
            font-size: 20px ;
        }
        .button-style:hover {
            background-color: #189fff;
            color: #fff;
        }
    </style>
</head>
<body>
<div id="app" class="page-box">
    <div class="container">
        <div>
            <img width="60" height="60" src="zfcglogo.png">
        </div>
        <div class="list-style">
            <div class="title">项目名称</div>
            <div class="detail"><show-value>{{order.xmmc ? order.xmmc:''}}</show-value></div>
        </div>
        <div class="list-style">
            <div class="title">订单尾号</div>
            <div class="detail"><show-value>{{order.trxid ? order.trxid:''}}</show-value></div>
        </div>
        <div class="line-style"></div>
        <div class="list-style">
            <div class="title">支付总额</div>
            <div class="detail"><show-value>{{order.trxamt ? order.trxamt: '' }}</show-value></div>
        </div>
        <div class="list-style" style="justify-content: center;">
            <div class="button-style" @click="goBack">
            返回会员中心
            </div>
        </div>
    </div>
</div>
<script>
    Vue.component('show-value', {
        template: `<div><slot><div> <div></slot></div>`
    })
    let vue = new Vue({
    el: '#app',
    data() {
        return {
            logo: './../static/zfcglogo.png',
            order: {},
            url: 'https://payapp.weixin.qq.com',
            result: {}
        }
    },
    created() {
        this.getQueryVal()
    },
    mounted() {
        this.showCustomPage()
    },
    methods: {

         // 新增iframe就绪通知方法
        notifyIframeReady() {
            const mchData = {
                action: 'onIframeReady',
                displayStyle: 'SHOW_CUSTOM_PAGE',
            };
            let postData = JSON.stringify(mchData)
            parent.postMessage(postData,'https://payapp.weixin.qq.com');
        },


        // 获取地址栏字段
        getQueryVal() {
            let that = this 
            // let astr = '?sub_mch_id=1234567&out_trade_no=ABCDEFG&check_code=39f0876dd58e4eb61b66250f69d02705'
            // let queryStr = astr.substring(1)
            let queryStr = window.location.search.substring(1) // 地址栏字符串
            let strArr = queryStr.split('&')
            that.result = {} 
            if (strArr.length) {
                strArr.forEach(val => {
                    let subStrArr = val.split('=')
                    that.result[subStrArr[0]] = subStrArr[1]
                })
            }
            console.log('地址栏字段', that.result)
            that.queryOrderInfo()
        },

        // 用于展示商家小票
        showCustomPage() {
            this.notifyIframeReady();

        },

        // 请求订单信息（需要保存订单信息的后台系统提供）
        queryOrderInfo() {
            let that = this 
            alert(this.result.out_trade_no)
            try{
                axios({
                method: 'get',
                url: 'https://sqeybusiness.abcsale.cn/sqeybusiness/mobile/getOrderinfoByReqsn',
                params: {
                    reqsn: this.result.out_trade_no
                }
            })
            .then(res => {
                debugger
                if (res.status == 200 ) {
                    if(res.data.code == 200 ){
                        that.order = res.data.data
                    }
                } else {
                    parent.alert('出错了，请联系管理员！')
                }
            })
            .catch(err => {
                parent.alert('出错了，请联系管理员！')
            })
            }catch(e){
                //parent.alert('出错了，请联系管理员！')
            }
            
        },

        // 返回首页
        goBack() {                       
            if(this.order.ywddidlx == '1' ){
                let mchData = {action:'jumpOut',jumpOutUrl:`https://sqeybusiness.abcsale.cn/home?sjid=${this.order.sjid}`}
                let postData = JSON.stringify(mchData)
                parent.postMessage(postData, this.url)
            }else{
                let mchData = {action:'jumpOut',jumpOutUrl:`https://sqeybusiness.abcsale.cn/hycenter?hyid=${this.order.ma001}`}
                let postData = JSON.stringify(mchData)
                parent.postMessage(postData, this.url)
            }
            
        }
    }
    })
</script>
</body>
</html>
